<template>
	<view class="content">
		<view class="loginpart">
			<!-- <view
			 class="cu-bar justify-left"
			 style="background:#4382FF;color:white"
			>
			多多岛
			</view> -->

			<view style="background:#4382ff;height:64px"></view>
			<view
				class="cu-bar justify-center"
				style="background:#4382ff;color:white"
			>
				<view class="action border-title">
					<text class="text-xl text-bold">登录</text>
					<text
						class="bg-grey"
						style="width:2rem"
					></text>
					<!-- 底部样式 last-child选择器-->
				</view>
			</view>
			<img
				src="/static/img/bg.png"
				alt=""
				class="hubg"
			/>
			<view class="login-bg">
				<view class="login-card">
					<view class="login-head">

						<view class="userinfo-avatars">
							<view>登录后完成认证流程即可开启门锁</view>

							<img
								src="/static/img/logo.png"
								alt=""
								class="logo"
							/>
						</view>
					</view>

					<view class="padding flex flex-direction">
						<button
							class="cu-btn blue margin-tb-sm lg"
							open-type="getPhoneNumber"
							@getphonenumber="getPhoneNumber"
						>
							手机号一键登录
						</button>
					</view>
					<view class="padding flex flex-direction foot">
						<view><text class="yiyuedu"></text>登录即代表您同意我们的<text class="xieyi">服务协议</text>和<text class="xieyi">隐私政策</text></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapActions } from "vuex";
	export default {
		data() {
			return {
				code: ""
			};
		},
		created() {
			var that = this;
			uni.login({
				provider: "weixin",
				success: function(loginRes) {
					console.log(loginRes);
					that.code = loginRes.code;
				}
			});
		},
		methods: {
			...mapMutations({
				setUser: "setUser",
				showM: "showM"
			}),
			login() {
				uni.request({
					url: "https://www.example.com/request", //仅为示例，并非真实接口地址。
					data: {
						text: "uni.request"
					},
					header: {
						"custom-header": "hello" //自定义请求头信息
					},
					success: res => {
						console.log(res.data);
						this.text = "request success";
					}
				});
			},
			getPhoneNumber(e) {
				console.log(e.detail.errMsg);
				console.log(e.detail.iv);
				console.log(e.detail.encryptedData);
				console.log(e);
				if (e.detail.errMsg != "getPhoneNumber:ok") {
					return;
				}
				let that = this;
				uni.showLoading({
					title: "登录中",
					mask: true
				});

				that.$http
					.post(
						"/app/getSessionKeyOrOpenId",
						that.$qs.stringify({
							code: that.code
						}),
						{
							header: {} /* 会覆盖全局header */,
							dataType: "json",
							responseType: "text"
						}
					)
					.then(res => {
						console.log(res);

						let data = res.data;
						if (data.code == 0) {
							that.$http
								.post(
									"/app/decryptPhoneNumber",
									that.$qs.stringify({
										iv: e.detail.iv,
										sessionKey: data.data.session_key,
										encryptedData: e.detail.encryptedData
									}),
									{
										header: {} /* 会覆盖全局header */,
										dataType: "json",
										responseType: "text"
									}
								)
								.then(res => {
									console.log(res);

									let data = res.data;
									if (data.code == 0) {
										setTimeout(function() {
											uni.hideLoading();
										}, 500);
										uni.setStorageSync("phone", data.msg);
										that.setUser(data.msg);
										uni.showToast({
											title: "登录成功",
											duration: 2000,
											mask: true
										});
										uni.switchTab({
											url: "/pages/home/home"
										});
										this.$http
											.post(
												"/app/getOrderInfo",
												this.$qs.stringify({
													tenantPhoneNumber: data.msg
												}),
												{
													header: {} /* 会覆盖全局header */,
													dataType: "json",
													responseType: "text"
												}
											)
											.then(res => {
												uni.hideLoading();
												setTimeout(function() {
													uni.stopPullDownRefresh();
												}, 500);
												let data = res.data;
												// if (data.data.orderList) {
												// 	this.showM();
												// }
												if (data.code == 0) {
													if (data.data.orderList.verify == 1) {
														uni.switchTab({
															url: "/pages/opendoor/opendoor"
														});
													}
												} else {
													uni.showToast({
														image: "/static/img/warn.png",
														title: data.msg,
														duration: 2000,
														mask: true
													});
												}
											})
											.catch(err => {});
									} else {
										uni.showToast({
											image: "/static/img/warn.png",
											title: data.msg,
											duration: 2000,
											mask: true
										});
									}
								})
								.catch(err => {
									setTimeout(function() {
										uni.hideLoading();
									}, 500);
									uni.showToast({
										image: "/static/img/error.png",
										title: "请求失败",
										duration: 2000,
										mask: true
									});
								});
						}
					})
					.catch(err => {});
			}
		}
	};
</script>

<style>
	.content {
		/* height: 400px; */
		/* height:100vh */
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}
	.loginpart {
		flex: 1;
	}
	.landing {
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: #4382ff;
	}
	.login-btn {
		padding: 10upx 20upx;
		margin-top: 350upx;
	}
	.login-function {
		overflow: auto;
		padding: 20upx 20upx 30upx 20upx;
	}
	.login-forget {
		float: left;
		font-size: 26upx;
		color: #999;
	}
	.login-register {
		color: #666;
		float: right;
		font-size: 26upx;
	}
	.login-input input {
		background: #f8f8f8;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}
	.login-margin-b {
		margin-bottom: 25upx;
	}
	.login-input {
		padding: 10upx 20upx;
	}
	.login-head {
		font-size: 46upx;
		text-align: center;
		padding: 25upx 10upx 55upx 10upx;
		display: flex;
		justify-content: center;
	}
	.login-card {
		background: #fff;
		border-radius: 12upx;
		padding: 10upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
		position: relative;
		/* margin-top: 120upx; */
	}
	.login-bg {
		height: 260upx;
		padding: 25upx;
		background: #4382ff;
	}
	.liji {
		font-size: 24upx;
		color: #787878;
	}
	.lijil,
	.lijir {
		color: #4382ff;
	}
	.lijir {
		margin-left: 10upx;
	}
	.blue {
		background: #4382ff !important;
		color: white;
	}
	.xieyi {
		color: #ff9429;
	}
	.yiyuedu {
		color: #7c7c7c;
	}
	.foot {
		justify-content: center;
		align-items: center;
		height: 30vh;
	}
	.banner {
		width: 100%;
		/* position: absolute; */
		/* bottom: 42px; */
		height: 164upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffa98a;
	}
	.hubg {
		position: absolute;
		top: 0;
		height: 300rpx;
		z-index: -1;
		width: 100%;
	}
	.userAvatarUrl {
		height: 100px;
		width: 100px;
	}
	.userinfo-avatars {
		overflow: hidden;
		display: block;
		width: 211rpx;
		height: 230rpx;
		margin: 20rpx;
		/* border-radius: 50%; */
		border: 2px solid #fff;
		/* box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); */
		/* margin-left: 10px; */
	}
	.logo {
		height: 100%;
		width: 100%;
	}
</style>
